<template>
    <div class="salesman-order-hanin" @click="selectState = !selectState">
        <div class="item-checkbox">
            <van-checkbox v-model="selectState" checked-color="#01CC01" />
        </div>
        <div class="order-list-container">
            <div class="olc-head">
                <span>订单编号：{{ ibase.number }}</span>
                <span>待上交</span>
            </div>
            <div v-if="ibase.shop" class="olc-shop">
                <div class="olc-shopname">
                    <img src="../../../../static/images/shop.png" />
                    <span>{{ ibase.shop }}</span>
                </div>
                <div class="olc-time">{{ ibase.time }}</div>
            </div>
            <order-list-item :ibase="ibase" :dataset="dataset" />
            <div class="olc-price">
                <p>订单合计：<span>￥</span><span>{{ parseFloat(ibase.amount).toFixed(2) }}</span></p>
                <p v-if="ibase.protect" class="tip-footer">(价格保护已开启)</p>
            </div>
        </div>
    </div>
</template>

<script>
    import { Checkbox } from 'vant';
    
    import OrderListItem from './normal-list-base.vue';

    export default {
        components: {
            [Checkbox.name]: Checkbox,
            OrderListItem
        },
        props: ['ibase', 'dataset', 'index', 'allSelect'],
        data() {
            return {
                selectState: false
            }
        },
        watch: {
            selectState(nVal, oVal) {
                this.$emit('onSelectOperate', {
                    select: nVal, index: this.index
                });
            },
            allSelect(nVal, oVal) {
                this.selectState = nVal;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .salesman-order-hanin {
        display: flex;
        border-bottom: 0.4rem solid #EEEEEE;

        .item-checkbox {
            display: flex;
            align-items: center;
            padding-left: 0.5rem;
            padding-right: 1.6rem;
        }
    }

    .order-list-container {
        flex: 1;

        .olc-head {
            margin-bottom: 1rem;
            padding: 0.5rem 0rem 0.8rem;
            border-bottom: 0.1rem solid #EEEEEE;
            display: flex;
            justify-content: space-between;

            span:first-child {
                font-size: 1.3rem;
                color: #999999;
            }

            span:last-child {
                font-size: 1.3rem;
                color: #00CC00;
            }
        }

        .olc-price {
            padding: 1rem 0rem 1.1rem;
            text-align: right;

            p:first-child {
                font-size: 1.4rem;
                color: #999999;

                span {
                    color: #FF0101;
                }

                span:first-child {
                    font-size: 1.4rem;
                }

                span:last-child {
                    font-size: 1.9rem;
                }
            }

            .tip-footer {
                font-size: 1.3rem;
                color: #FF9000;
            }
        }

        .olc-shop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.4rem;
            margin-bottom: 1rem;

            .olc-shopname {
                color: #666666;

                img{
                    width: 1.4rem;
                    height: 1.4rem;
                    vertical-align: bottom;
                }
            }

            .olc-time {
                color: #999999;
            }
        }
    }
</style>
